<!--
 * name:首页
 * author:phx
 * date:2021.7.1
-->
<template>
    <div class="dashboard">
        <headerIndex></headerIndex>
        <div class="content">
            <div class="con-left">
                <main-data :totalData="totalData" :dataByLocal="dataByLocal"></main-data>
                <div class="con-l-btm">
                    <model-count :prodModeData="prodModeData" :modeTotal="modeTotal"></model-count>
                    <api-count :apiData="apiData"></api-count>
                </div>
            </div>
            <div class="con-right">
                <device-status></device-status>
                <div class="device-middle">
                    <device-type></device-type>
                    <device-rank></device-rank>
                </div>
                <user-analysis></user-analysis>
            </div>
        </div>
        <footer-index></footer-index>
    </div>
</template>
<script>
    import HeaderIndex from '@/components/Header/index'
    import MainData from '@/components/MainData/index'
    import DeviceStatus from '@/components/DeviceStatus/index'
    import DeviceType from "@/components/DeviceType/index";
    import DeviceRank from "@/components/DeviceRank/index";
    import ModelCount from "@/components/ModelCount/index";
    import ApiCount from "@/components/ApiCount/apiCount";
    import UserAnalysis from "@/components/UserAnalysis/userAnalysis";
    import FooterIndex from "../components/Footer/index";
    import {
        getTotalData,
        getProductData
    } from "@/api/apiList";

    export default {
        name: "home",
        components: {
            FooterIndex,
            UserAnalysis,
            ApiCount,
            ModelCount,
            DeviceRank,
            DeviceType,
            MainData,
            HeaderIndex,
            DeviceStatus
        },
        data: () => ({
            totalData: {},  //整体数据
            prodModeData: {},//产品模型数据
            apiData: {},  //api数据
            modeTotal:'',
            dataByLocal:[]
        }),
        methods: {
            /**
             * 获取左上整体数据
             */
            getTotalData() {
                getTotalData({}).then(res => {
                    console.log('整体数据', res);
                    this.totalData = res.data || {};
                });
            },
            /**
             * 下一位置产品模型统计数据
             */
            getProductData() {
                getProductData({}).then(res => {
                    res = res.data;
                    console.log('产品模型统计', res);
                    this.prodModeData = res.data;
                    this.modeTotal = res.total;
                    this.dataByLocal = res.dataByLocal
                });
            },
        },
        created() {
            this.getTotalData();
            this.getProductData();
        }
    };
</script>
<style lang="less" type="text/less">
    html, body {
        position: absolute;
        background: url(../assets/img/bg/bg.png) no-repeat;
        background-size: cover;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .dashboard {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        transform: translate(-50%, 0);
        width: 100%;
        .content {
            padding: 0 30px;
            display: flex;
            .con-left {
                position: relative;
                margin-right: 14px;
                width: 47%;
                .con-l-btm {
                    display: flex;
                    margin-top: 14px;
                    height: 26vh;
                }
            }
            .con-right {
                flex: 1;
                .device-middle {
                    margin-top: 14px;
                    position: relative;
                    display: flex;
                    width: 100%;
                    height: 26.7vh;
                }
            }
        }
    }

    .item-warp {
        padding: 0 20px !important;
        .item-title {
            display: flex;
            h2 {
                font-size: 16px;
                line-height: 50px;
                font-weight: normal;
            }
            a.btn {
                display: block;
                margin-top: 10px;
                margin-left: auto;
                width: 30px;
                height: 30px;
            }
        }
    }
</style>

